<!-- 动画中心 -->
<template>
	<div class="content commonality">
		<!-- 筛选列表 -->
		<AddSort :visible.sync="drawer" @updateItems="addAnimation" addName="新增动画">
			<template v-slot:search>
				<!-- :fetch-suggestions="onSearch" -->
				<el-input
					:trigger-on-focus="false"
					@clear="searchText"
					clearable
					placeholder="请输入关键词或项目ID进行搜索"
					suffix-icon="el-icon-search"
					v-model="searchText"
					value-key="searchText"
				></el-input>
			</template>
			<template v-slot:type>
				<div class="classify">
					<span class="type">分类：</span>
					<span :key="item" class="classify-item" v-for="item in firstList">{{item}}</span>
				</div>
				<div class="classifySecond">
					<span class="type">分类：</span>
					<span :key="item" class="classifySecond-item" v-for="item in secondList">{{item}}</span>
				</div>
			</template>
		</AddSort>

		<!-- 播放列表 -->
		<div class="videoList">
			<div :key="i.aid" v-for="i in newData.bangumi">
				<img :src="i.pic" height="100%" width="100%" />
			</div>
		</div>
	</div>
</template>

<script>

export default {
  name: 'animationCenter',
  data() {
    return {
      drawer: false,
      newData: '',
      newData1: '',
      restaurants: [],
      state: '',
      timeout: null,
      firstList: ['房建', '道路', '桥涵'],
      secondList: ['施工技术模拟', '水处理工艺模拟', 'BIM技术应用介绍视频'],
      searchText: '',
      dialog: false,
    }
  },

  created() {
  },
  mounted() {
    // this.addAnimation()
  },
  methods: {
    addAnimation(addItems) {
      this.dialog = addItems
      if (this.dialog) {
        this.$router.push({ name: 'addAnimation' })
      }
    },
    getTree() {

    },
    submit() {

    }
  },
  // components: {
  //   AddAnimation: () => import('./addAnimation/index.vue')
  // }
}
</script>

<style lang="scss" scoped>
.classify {
	color: #fff;
	line-height: 60px;
	&-item {
		padding: 8px;
	}
}
.classifySecond {
	color: #fff;
	// line-height: 30px;
	&-item {
		padding: 8px;
	}
}
.type {
	display: inline-block;
	width: 100px;
	text-align: right;
}
::v-deep .el-input--mini {
	// 分类输入框
	.el-input__inner {
		width: 200px;
		background: none;
	}
}
// 动画列表
.videoList {
	margin-bottom: 25px;
	height: 450px;
	overflow: scroll;
	display: flex;
	justify-content: space-between;
	align-content: space-between;
	flex-wrap: wrap;
	// 列表每一项
	div {
		width: 32%;
		height: 220px;
		margin-bottom: 20px;
	}
}
</style>
